.fade-enter-active,
.fade-leave-active {
  transition: opacity 3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.fade-enter-to {
}

.loop {
  width: 260px;
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: beige;
  transition: right 0.2s ease-in;
}

.loop-show {
  right: 0;
}

.loop-hide {
  right: -260px;
}

.loop-item {
  height: 130px;
}

.loop-item:nth-child(1) {
  background-color: aliceblue;
}
.loop-item:nth-child(2) {
  background-color: aquamarine;
}

.lis {
  width: 30px;
  height: 25px;
}

.lis--active {
  color: #fff;
  font-size: large;
  background-color: #ff6a9c;
}
.lis--active::before {
  content: '';
  display: block;
  width: 1px;
  border: 12px rgb(0 0 0 / 0%) solid;
  border-left: 0;
  border-right: 23px #ff6a9c solid;
  position: absolute;
  left: 23px;
  z-index: -1;
}